<!--
 * @Descripttion: 
 * @version: 
 * @Author: cyj
 * @Date: 2023-01-31 16:57:41
-->
<template>
    <div class="video">
        <!-- 头部标签 -->
        <VideoNav :hotTag="video.hotTag" :allTag="video.allTag" @tagClick="tagClick"></VideoNav>
        <!-- 视频列表 -->
        <div class="video-list">
            <div class="video-list-item" v-for="(item, index) in info.videoList" :key="index">
                <mvlist :item="item"></mvlist>
            </div>
        </div>
    </div>
</template>

<script setup>
import { onMounted, reactive, onActivated, onDeactivated } from 'vue';
import { getAllVideoTag, getHotVideoTag, getGroupVideoList } from '@/api/recvideo/recvideo.js'
import { useVideo } from '@/store/video.js'
import { useUserStore } from '@/store/user.js'
import { ElMessage } from 'element-plus'
import { getItem, debounce } from '@/utils/utils.js'
import VideoNav from '@/components/VideoNav.vue'
import mvlist from '@/components/content/MVlist/mvlist.vue'
const video = useVideo()
const user = useUserStore()
const info = reactive({
    tagId: '',  //标签id
    offset: 0,
    videoList: [],  //视频列表
})
//获取全部视频列表-标签
async function getAllVideo() {
    let res = await getAllVideoTag()
    if (res.data.code === 200) {
        video.allTag = res.data.data
    }
}
//获取热门分类视频列表 
async function getHotVideo() {
    let res = await getHotVideoTag(getItem('cookie'))
    if (res.data.code == 200) {
        video.hotTag = res.data.data
        info.tagId = video.hotTag[0].id  //默认是现场
        getGroupVideoListBy(info.tagId)
    }
}

//出来子组件标签点击 回调
function tagClick(item) {
    info.offset = 0;
    info.tagId = item.id;
    info.videoList = [];
    getGroupVideoListBy(item.id)
}

//获取分类视频列表
function getGroupVideoListBy(id) {
    getGroupVideoList(id, info.offset, getItem('cookie')).then(res => {
        if (res.data.hasmore) {
            info.videoList.push(...res.data.datas)
            info.offset++;
            if (info.offset < 4) {
                getGroupVideoListBy(info.tagId)
            }
        }
    })
}

//拉到底部再次获取数据
function load() {
    let view = document.querySelector('.view')
    if (Math.ceil(view.scrollTop) + view.clientHeight == view.scrollHeight) {
        getGroupVideoListBy(info.tagId);
    }
}
onActivated(() => {
    document.querySelector('.view').addEventListener('scroll', debounce(load, 500, true))
})

onDeactivated(() => {
    document.querySelector('.view').removeEventListener('scroll', load)
})

onMounted(() => {
    //没有登录
    if (!user.isLogin) {
        ElMessage({
            message: '请先登录',
            showClose: true,
            type: 'warning',
        })
        return;
    }
    getAllVideo()
    getHotVideo()

})
</script>

<style lang="scss" scoped>
.video {
    .video-list {
        margin-top: 20px;
        display: flex;
        flex-wrap: wrap;

        &-item {
            margin: 0px 10px;
            margin-bottom: 10px;
        }
    }
}
</style>